<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>搜索 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4263EB;
            --primary-light: #E8F0FE;
            --secondary: #FA5252;
            --gray: #6C757D;
            --light-gray: #F8F9FA;
            --border-radius: 8px;
            --card-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #F5F7FA;
            color: #333;
            padding-top: 56px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .back-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: #333;
            font-size: 20px;
            margin-right: 8px;
        }
        
        /* 搜索框 */
        .search-container {
            flex: 1;
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 24px;
            border: 1px solid #E9ECEF;
            font-size: 14px;
            background-color: var(--light-gray);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .cancel-btn {
            color: var(--primary);
            background: none;
            border: none;
            font-size: 16px;
            padding: 0 8px;
            display: none;
        }
        
        .cancel-btn.show {
            display: block;
        }
        
        /* 搜索类型标签 */
        .search-tabs {
            display: flex;
            background-color: white;
            padding: 8px 12px;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid #E9ECEF;
        }
        
        .search-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .search-tab {
            flex-shrink: 0;
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            background: none;
            color: var(--gray);
            margin-right: 8px;
        }
        
        .search-tab.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 搜索结果容器 */
        .search-results {
            padding: 16px;
        }
        
        /* 结果统计 */
        .results-stats {
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 16px;
        }
        
        /* 通用结果项样式 */
        .result-item {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 12px;
            margin-bottom: 12px;
            box-shadow: var(--card-shadow);
            transition: transform 0.2s ease;
        }
        
        .result-item:hover {
            transform: translateY(-2px);
        }
        
        .result-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .result-type {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            margin-right: 8px;
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .result-date {
            font-size: 12px;
            color: var(--gray);
            margin-left: auto;
        }
        
        .result-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
            line-height: 1.4;
        }
        
        .result-title em {
            color: var(--secondary);
            font-style: normal;
            font-weight: 700;
        }
        
        .result-content {
            font-size: 14px;
            color: #555;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        
        .result-content em {
            color: var(--secondary);
            font-style: normal;
        }
        
        /* 文章结果样式 */
        .article-result .result-footer {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--gray);
        }
        
        .article-meta {
            display: flex;
            gap: 16px;
        }
        
        /* 相册结果样式 */
        .album-result .result-content {
            display: flex;
            gap: 6px;
            margin-bottom: 8px;
        }
        
        .album-image {
            width: 28%;
            height: 70px;
            border-radius: 4px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .album-result .result-footer {
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 动态结果样式 */
        .post-result {
            display: flex;
            gap: 10px;
        }
        
        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .post-content {
            flex: 1;
        }
        
        .post-author {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .post-result .result-footer {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: var(--gray);
            margin-top: 6px;
        }
        
        /* 服务结果样式 */
        .service-result {
            display: flex;
            gap: 12px;
        }
        
        .service-image {
            width: 80px;
            height: 80px;
            border-radius: var(--border-radius);
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .service-info {
            flex: 1;
        }
        
        .service-price {
            font-size: 16px;
            font-weight: 600;
            color: var(--secondary);
            margin: 4px 0;
        }
        
        .service-rating {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: var(--gray);
            margin-bottom: 4px;
        }
        
        .star-rating {
            color: #FFC107;
            margin-right: 4px;
        }
        
        /* 招聘求职结果样式 */
        .job-result {
            border-left: 3px solid var(--primary);
        }
        
        .job-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .job-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .job-type {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
            background-color: #E6F7EE;
            color: #00B42A;
        }
        
        .job-company {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 6px;
        }
        
        .job-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 12px;
            color: #666;
        }
        
        .job-meta span {
            background-color: var(--light-gray);
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        /* 空状态 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            text-align: center;
        }
        
        .empty-icon {
            font-size: 60px;
            color: #CED4DA;
            margin-bottom: 20px;
        }
        
        .empty-text {
            font-size: 16px;
            color: var(--gray);
            margin-bottom: 10px;
        }
        
        .empty-subtext {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 24px;
            max-width: 240px;
        }
        
        .empty-btn {
            padding: 8px 24px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 500;
        }
        
        /* 热门搜索 */
        .hot-searches {
            padding: 16px;
            background-color: white;
            margin-top: 12px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #333;
        }
        
        .hot-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .hot-tag {
            padding: 6px 14px;
            background-color: var(--light-gray);
            border-radius: 16px;
            font-size: 14px;
            color: #555;
            white-space: nowrap;
        }
        
        .hot-tag .tag-hot {
            color: var(--secondary);
            margin-right: 4px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="back-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="search-container">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" id="searchInput" placeholder="搜索文章、动态、服务、招聘...">
        </div>
        <button class="cancel-btn" id="cancelBtn">取消</button>
    </div>
    
    <!-- 搜索类型标签 -->
    <div class="search-tabs">
        <button class="search-tab active" data-type="all">全部</button>
        <button class="search-tab" data-type="article">文章</button>
        <button class="search-tab" data-type="album">相册</button>
        <button class="search-tab" data-type="post">动态</button>
        <button class="search-tab" data-type="service">服务</button>
        <button class="search-tab" data-type="job">招聘</button>
        <button class="search-tab" data-type="resume">求职</button>
    </div>
    
    <!-- 搜索结果容器 -->
    <div class="search-results" id="searchResults">
        <div class="results-stats">找到约 12 个结果（"设计"）</div>
        
        <!-- 文章结果 -->
        <div class="result-item article-result" data-type="article">
            <div class="result-header">
                <span class="result-type">文章</span>
                <span class="result-date">2023-10-15</span>
            </div>
            <div class="result-title">
                如何成为一名优秀的<em>设计</em>师：从入门到精通
            </div>
            <div class="result-content">
                本文将分享<em>设计</em>行业的必备技能和成长路径，帮助新手快速掌握<em>设计</em>精髓，提升职业竞争力...
            </div>
            <div class="result-footer">
                <div class="article-meta">
                    <span><i class="far fa-eye"></i> 2.5k阅读</span>
                    <span><i class="far fa-comment"></i> 42评论</span>
                </div>
                <span><i class="far fa-bookmark"></i> 设计专栏</span>
            </div>
        </div>
        
        <!-- 相册结果 -->
        <div class="result-item album-result" data-type="album">
            <div class="result-header">
                <span class="result-type">相册</span>
                <span class="result-date">2023-10-10</span>
            </div>
            <div class="result-title">
                年度<em>设计</em>作品精选集
            </div>
            <div class="result-content">
                <img src="https://picsum.photos/id/96/300/200" alt="设计作品" class="album-image">
                <img src="https://picsum.photos/id/26/300/200" alt="设计作品" class="album-image">
                <img src="https://picsum.photos/id/65/300/200" alt="设计作品" class="album-image">
            </div>
            <div class="result-footer">
                <span><i class="far fa-images"></i> 共24张照片</span>
                <span><i class="far fa-heart"></i> 138喜欢</span>
            </div>
        </div>
        
        <!-- 动态结果 -->
        <div class="result-item post-result" data-type="post">
            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="post-avatar">
            <div class="post-content">
                <div class="post-author">李明设计</div>
                <div class="result-content">
                    今天分享一个新的<em>设计</em>理念，关于极简主义在UI<em>设计</em>中的应用，大家觉得怎么样？#设计灵感#
                </div>
                <div class="result-footer">
                    <span><i class="far fa-heart"></i> 56</span>
                    <span><i class="far fa-comment"></i> 12</span>
                    <span><i class="far fa-share-square"></i> 3</span>
                </div>
            </div>
        </div>
        
        <!-- 服务结果 -->
        <div class="result-item service-result" data-type="service">
            <img src="https://picsum.photos/id/42/300/300" alt="设计服务" class="service-image">
            <div class="service-info">
                <div class="result-header">
                    <span class="result-type">服务</span>
                </div>
                <div class="result-title">
                    专业品牌<em>设计</em>与视觉识别系统定制
                </div>
                <div class="service-price">¥2,800 起</div>
                <div class="service-rating">
                    <span class="star-rating"><i class="fas fa-star"></i> 4.9</span>
                    <span>128条评价</span>
                </div>
                <div class="result-content">
                    提供logo<em>设计</em>、VI系统、包装<em>设计</em>等一站式品牌视觉解决方案，10年行业经验...
                </div>
            </div>
        </div>
        
        <!-- 招聘结果 -->
        <div class="result-item job-result" data-type="job">
            <div class="job-header">
                <div class="job-title">UI/UX<em>设计</em>师</div>
                <span class="job-type">全职</span>
            </div>
            <div class="job-company">创新科技有限公司</div>
            <div class="job-meta">
                <span>5k-10k</span>
                <span>经验1-3年</span>
                <span>本科</span>
                <span>北京</span>
            </div>
            <div class="result-content">
                负责公司产品的界面<em>设计</em>和用户体验优化，参与产品<em>设计</em>讨论，制定<em>设计</em>规范...
            </div>
        </div>
        
        <!-- 求职结果 -->
        <div class="result-item job-result" data-type="resume">
            <div class="job-header">
                <div class="job-title">资深<em>设计</em>师求职</div>
                <span class="job-type">随时到岗</span>
            </div>
            <div class="job-company">王设计师 / 3年经验</div>
            <div class="job-meta">
                <span>期望薪资：8k-15k</span>
                <span>擅长：UI设计</span>
                <span>学历：本科</span>
                <span>地点：上海</span>
            </div>
            <div class="result-content">
                3年<em>设计</em>经验，曾任职于知名互联网公司，精通Figma、Sketch等<em>设计</em>工具，熟悉<em>设计</em>规范...
            </div>
        </div>
    </div>
    
    <!-- 热门搜索 -->
    <div class="hot-searches">
        <div class="section-title">热门搜索</div>
        <div class="hot-tags">
            <div class="hot-tag"><span class="tag-hot"><i class="fas fa-fire"></i></span>前端开发</div>
            <div class="hot-tag"><span class="tag-hot"><i class="fas fa-fire"></i></span>市场营销</div>
            <div class="hot-tag">摄影</div>
            <div class="hot-tag">美食</div>
            <div class="hot-tag">旅行</div>
            <div class="hot-tag"><span class="tag-hot"><i class="fas fa-fire"></i></span>人工智能</div>
            <div class="hot-tag">健身</div>
            <div class="hot-tag">英语学习</div>
            <div class="hot-tag">创业</div>
            <div class="hot-tag">职场</div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const searchInput = document.getElementById('searchInput');
        const cancelBtn = document.getElementById('cancelBtn');
        const searchTabs = document.querySelectorAll('.search-tab');
        const resultItems = document.querySelectorAll('.result-item');
        const resultsStats = document.querySelector('.results-stats');
        const backBtn = document.getElementById('backBtn');
        const hotTags = document.querySelectorAll('.hot-tag');
        
        // 搜索输入处理
        searchInput.addEventListener('focus', function() {
            cancelBtn.classList.add('show');
        });
        
        cancelBtn.addEventListener('click', function() {
            searchInput.value = '';
            cancelBtn.classList.remove('show');
            searchInput.blur();
            // 显示所有结果
            resultItems.forEach(item => {
                item.style.display = 'block';
            });
            resultsStats.textContent = '找到约 12 个结果';
        });
        
        // 搜索功能
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.trim().toLowerCase();
            
            if (searchTerm) {
                let count = 0;
                resultItems.forEach(item => {
                    const title = item.querySelector('.result-title')?.textContent.toLowerCase() || '';
                    const content = item.querySelector('.result-content')?.textContent.toLowerCase() || '';
                    
                    if (title.includes(searchTerm) || content.includes(searchTerm)) {
                        item.style.display = 'block';
                        count++;
                        
                        // 高亮搜索词
                        highlightText(item, searchTerm);
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                resultsStats.textContent = `找到约 ${count} 个结果（"${searchTerm}"）`;
            } else {
                // 重置所有结果
                resultItems.forEach(item => {
                    item.style.display = 'block';
                    // 移除高亮
                    removeHighlight(item);
                });
                resultsStats.textContent = '找到约 12 个结果';
            }
        });
        
        // 高亮搜索词
        function highlightText(element, term) {
            // 先移除已有的高亮
            removeHighlight(element);
            
            // 处理标题
            const titleEl = element.querySelector('.result-title');
            if (titleEl) {
                const text = titleEl.textContent;
                const regex = new RegExp(`(${term})`, 'gi');
                titleEl.innerHTML = text.replace(regex, '<em>$1</em>');
            }
            
            // 处理内容
            const contentEl = element.querySelector('.result-content');
            if (contentEl) {
                const text = contentEl.textContent;
                const regex = new RegExp(`(${term})`, 'gi');
                contentEl.innerHTML = text.replace(regex, '<em>$1</em>');
            }
        }
        
        // 移除高亮
        function removeHighlight(element) {
            const emElements = element.querySelectorAll('em');
            emElements.forEach(em => {
                const textNode = document.createTextNode(em.textContent);
                em.parentNode.replaceChild(textNode, em);
            });
        }
        
        // 类型标签切换
        searchTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 更新标签状态
                searchTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                const type = this.getAttribute('data-type');
                let count = 0;
                
                // 筛选结果
                resultItems.forEach(item => {
                    if (type === 'all' || item.getAttribute('data-type') === type) {
                        item.style.display = 'block';
                        count++;
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 更新统计
                const searchTerm = searchInput.value.trim() || '';
                resultsStats.textContent = `找到约 ${count} 个结果${searchTerm ? `（"${searchTerm}"）` : ''}`;
            });
        });
        
        // 热门标签点击
        hotTags.forEach(tag => {
            tag.addEventListener('click', function() {
                const tagText = this.textContent.replace(/🔥/, '').trim();
                searchInput.value = tagText;
                cancelBtn.classList.add('show');
                
                // 触发搜索
                const event = new Event('input', { bubbles: true });
                searchInput.dispatchEvent(event);
                
                // 聚焦输入框
                searchInput.focus();
            });
        });
        
        // 返回按钮
        backBtn.addEventListener('click', function() {
            history.back();
        });
    </script>
</body>
</html>
